<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蓝桥排位赛可视化大屏</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body> 
 <h1>蓝桥排位赛可视化大屏</h1>
 <div class="container">
	 <div class="left">
		 <div class="top"></div>
		 <div class="map" id="chinaMap"></div>
	 </div>
	 <div class="right">
		 <div class="top"></div>
		 <div class="chart" id="chart"></div>
	 </div>
 </div>
</body> 
<script src="js/vue.min.js"></script>
<script src="js/axios.js"></script> 
<script src="js/echarts.min.js"></script>  
<script src="js/china.js"></script>
<script>
	const app = new Vue({
	    el: "#app",
	    mounted() { 
		   axios.get('./mock/map.json').then(data => {
			   this.chartsData =  data.data
			   this.showChartBar(); 
			   this.showChinaMap(); 
		   }) 
	    },
	    data: {
		   chartsData: []
	    },
	    methods: {   
		  // 展示柱状图
	      showChartBar() {
			  const myChart = echarts.init(document.getElementById("chart")); 
			  
	          let data = this.chartsData.map((item, index) => {
				  return item.school_power
			  })  
			  let result = data.flat(1).sort((a,z) => {
				  return z.power - a.power
			  }) 
			  let arr = result.slice(0,10)
			  let school = arr.map(item => {
				  return item.name
			  })
			  let power = arr.map(item => {
			      return item.power
			  }) 
	          // 指定配置和数据
				  option = {
					tooltip: {
					    trigger: 'axis',
					    axisPointer: {
					      type: 'shadow'
					    }
					},
					xAxis: {
					  type: 'category',
					  axisLabel: { interval: 0, rotate: 40 },
					  data: school
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%', 
						containLabel: true
					},
					yAxis: {
					  type: 'value',
					  boundaryGap: [0, 0.01]
					},
					series: [
					  {
						data: power,
						type: 'bar', 
						showBackground: true,
						backgroundStyle: {
						  color: 'rgba(180, 180, 180, 0.2)'
						},
						itemStyle: {
							color: '#8c7ae6'
						}
					  }
					]
				  };
	          // 把配置给实例对象
	          myChart.setOption(option);
	          // 根据浏览器大小切换图表尺寸
	          window.addEventListener("resize", function () {
	            myChart.resize();
	          }); 
	    }, 
		// 展示地图
	    showChinaMap() { 
	          const chinaMap = echarts.init(document.getElementById('chinaMap')); 
	          window.onresize = chinaMap.resize;
			   // TODO 进行相关配置
			   chinaMap.setOption({
				  // 悬浮弹窗
				  tooltip: [
					  { 
						  backgroundColor: '#fff',
						  subtext: "aaa",
						  borderColor: '#ccc',
						  padding: 15,
						  formatter:  params => { 
							  if(!params.data)return;
							  return params.name + '热度值:' + params.value + '<br>' + params.data.school_count + '所学校已加入备赛'
						  },
						  textStyle: {
							  fontSize: 18,
							  fontWeight: 'bold',
							  color: '#464646'
						  },
						  subtextStyle : {
							  fontSize: 12, 
							  color: '#6E7079'
						  }
					  }
				  ], 
				  geo: {
					// 这个是重点配置区
					map: "china", // 表示中国地图
					roam: true, // 缩放和平移漫游
					label: {
					  normal: {
						show: false, // 是否显示对应地名 
					  },
					},
					itemStyle: {
					  normal: {
						borderColor: 'rgb(38,63,168)',
						borderWidth: "0.4",
						areaColor: "#fff",
					  },
					  emphasis: { //鼠标移入的效果
						areaColor: "rgb(255,158,0)",
						shadowOffsetX: 0,
						shadowOffsetY: 0,
						shadowBlur: 20,
						borderWidth: 0,
						shadowColor: "rgba(0, 0, 0, 0.5)",
					  },
					},
				  },
				  visualMap : {
					  show: true,
					  left: 'center',
					  top: 'bottom', 
					  type: 'piecewise',
					  align: 'bottom',
					  orient: 'horizontal',
					  pieces: [ 
						  { 
							  gte: 80000,
							  color: 'rgb(140,122,230)'
						  },{
							  min: 50000,
							  max: 79999,
							  color: 'rgba(140,122,230,.8)'
						  },
						  {
							  min: 30000,
							  max: 49999,
							  color: 'rgba(140,122,230,.6)'
						  },
						  {
							  min: 10000,
							  max: 29999,
							  color: 'rgba(140,122,230,.4)'
						  },
						  {
							  min: 1,
							  max:9999,
							  color: 'rgba(140,122,230,.2)'
						  }
					  ],
					  textStyle: {
						  color: '#000',
						  fontSize: '11px'
					  }
				  },
				  series: [
					{ 
					  type: "map",
					  geoIndex: 0,
					  data: this.chartsData,
					},
				  ],
				}); 
			}
	      }
	  });
	</script>  
</html>